
<template>
  <div class="tree-header" @click="toExpase">
    {{row?.attrs?.label }}
    <el-icon>
      <DArrowLeft v-if="row?.expase?.expaseStatus =='close'"></DArrowLeft>
      <DArrowRight v-else></DArrowRight>
    </el-icon>
  </div>
</template>
<script lang="ts" setup>
import { useAttrs, ref, watch } from 'vue';
const row = ref<any>()
const emits = defineEmits(['toExpase'])
const isExpase = ref(false)
const attrs:any = useAttrs()
 row.value =attrs.props.row ?? {}
 const toExpase = () => {
  
  isExpase.value = !isExpase.value 
  // row.value.children = []
  changeExpase(true)
  emits('toExpase', {isExpase:isExpase.value,row: row.value})
 }
 const changeExpase = (initFlag=false) => {
  if(row.value?.expase?.isExpase){
    const num = row.value.expase?.num ?? 1
    if(row.value.expase.expaseStatus =='open' ){ //收缩
      // row.value.oldChildren  = row.value.children
      row.value.children = row.value.children.slice(0, num)
      if(initFlag) row.value.expase.expaseStatus = 'close'
    }else{
      row.value.children  = row.value.oldChildren //展开
      if(initFlag) row.value.expase.expaseStatus = 'open'
      // delete row.value.oldChildren 
    }
  }

 }  
//  changeExpase()
//  console.log(row.value)
</script>
<style scoped>
.tree-header{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
